<template>
	<jk-view :loading="showLoading">
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div>
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<jk-common-status :status="ruleForm.auditState"></jk-common-status>
					</el-tag>
				</div>
				<div class="flex-end-center">
					<el-button type="info" plain icon="el-icon-back" size="small" class="item-gap" @click="onJumpList">返回列表</el-button>
					<jk-save-button v-if="pageType === 'add' || pageType === 'edit'" :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveBtnLoading" class="item-gap" :permission-prefix="prefix" @click="onConfirmBtn(0)"></jk-save-button>
					<div v-if="pageType === 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" type="primary" icon="el-icon-edit" size="small" @click="onEditBtn">编辑</jk-button></div>
					<div v-if="pageType !== 'detail'" class="item-gap"><jk-button :disabled="ruleForm.auditState === 1 || ruleForm.auditState === null" :loading="saveAndEnableBtnLoading" type="primary" icon="el-icon-document-checked" size="small" @click="onConfirmBtn(2)">{{ ruleForm.id ? '保存' : '保存' }}并启用</jk-button></div>
					<jk-button v-if="(pageType === 'detail' || pageType === 'edit') && ruleForm.auditState === 1" :loading="auditStateLoading" :type="ruleForm.auditState === 1 ? 'warning' : 'success'" class="pointer item-gap" :icon="ruleForm.auditState ? 'el-icon-video-pause' : 'el-icon-video-play'" size="small" @click="onAuditStateChange">{{ ruleForm.auditState === 0 ? '启用': '停用' }}</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<el-row :gutter="14">
			<el-col :span="showTemplate ? 12 : 24">
				<jk-card class="margin-bottom-20" :show-header="true" :header-style="{ justifyContent: 'center', background: '#e8eaec' }">
					<div slot="header" class="width-100-percent">
						<div class="flex-between-center width-100-percent">
							<span>核价单</span>
							<el-switch
								v-show="isCopy === '1'"
								v-model="showTemplate"
								inactive-color="#c5c8ce"
								inactive-text="模版"
							></el-switch>
						</div>
					</div>
					<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="100px" :show-message="false">
						<div ref="box3">
							<div class="flex-between-center margin-bottom-4">
								<el-tag type="primary" effect="plain">
									<span class="el-icon-tickets item-gap"></span>
									<span>基本信息</span>
								</el-tag>
							</div>
							<jk-card class="margin-bottom-20">
								<el-row ref="box1">
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="日期" prop="belongDate">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.belongDate }}</span>
											<el-date-picker v-else v-model="ruleForm.belongDate" clearable type="date" style="width: 100%;" value-format="yyyy-MM-dd" placeholder="日期" />
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="客户" prop="customerId">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.customerName }}</span>
											<remote-search-customer-input
												v-else
												placeholder="客户"
												only-key="customerId"
												query-name="customerName"
												:form-data="ruleForm"
												@on-select="onSelectCustomerChange"
											></remote-search-customer-input>
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="产品" prop="productId">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.productName }}</span>
											<remote-search-product-input
												v-else
												placeholder="产品"
												default-stock-type="FINISHED_PRODUCT"
												only-key="productId"
												query-name="productName"
												:form-data="ruleForm"
												@on-select="onSelectProductChange"
											></remote-search-product-input>
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="支数">
											<span class="read-only-2">{{ ruleForm.yarnCount }}</span>
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="利润" prop="profit">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.profit }}</span>
											<jk-number-input v-else v-model="ruleForm.profit" placeholder="利润" />
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="报价" prop="offerPrice">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.offerPrice }}</span>
											<jk-number-input v-else v-model="ruleForm.offerPrice" disabled placeholder="报价" />
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="有效期" prop="dateRange">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ `${ruleForm.effectiveStartDate}~${ruleForm.effectiveEndDate}` }}</span>
											<el-date-picker v-else v-model="ruleForm.dateRange" clearable type="datetimerange" size="medium" value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;" placeholder="有效期" />
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="报价员" prop="empId">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.empName }}</span>
											<remote-search-emp-input
												v-else
												placeholder="报价员"
												only-key="empId"
												query-name="empName"
												:form-data="ruleForm"
												@on-select="onSelectEmpChange"
											></remote-search-emp-input>
										</el-form-item>
									</el-col>
								</el-row>
							</jk-card>
						</div>
						<div ref="box2">
							<div class="flex-between-center">
								<el-tag type="primary" effect="plain" class="margin-bottom-4">
									<span class="el-icon-paperclip item-gap"></span>
									<span>一体丝</span>
								</el-tag>
							</div>
							<jk-card class="margin-bottom-20">
								<el-row>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="品种" prop="coreProductId">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.coreProductName }}</span>
											<remote-search-product-input
												v-else
												placeholder="品种"
												default-stock-type="RAW_MATERIAL"
												only-key="coreProductId"
												query-name="coreProductName"
												:form-data="ruleForm"
												@on-select="onSelectCoreProductChange"
											></remote-search-product-input>
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="单价">
											<span class="read-only-2">{{ ruleForm.coreContentPrice }}</span>
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="含芯量" prop="coreContent">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.coreContent }}</span>
											<jk-number-input v-else v-model="ruleForm.coreContent" placeholder="含芯量" />
										</el-form-item>
									</el-col>
									<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
										<el-form-item class="margin-bottom-10" label="金额" prop="coreContentAmount">
											<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.coreContentAmount }}</span>
											<jk-number-input v-else v-model="ruleForm.coreContentAmount" placeholder="金额" />
										</el-form-item>
									</el-col>
								</el-row>
								<core-option-list
									:page-type="pageType"
									:layout-config="layoutConfig"
									:show-template="showTemplate"
									:option-list="ruleForm.onePieceSilkItem"
									@return-data="onReturnDataOfCore"
								></core-option-list>
							</jk-card>
						</div>
						<el-tag type="primary" effect="plain" class="margin-bottom-4">
							<span class="el-icon-notebook-2 item-gap"></span>
							<span>氨纶</span>
						</el-tag>
						<jk-card class="margin-bottom-20">
							<el-row>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="品种" prop="spandexProductId">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.spandexProductName }}</span>
										<remote-search-product-input
											v-else
											placeholder="品种"
											default-stock-type="RAW_MATERIAL"
											only-key="spandexProductId"
											query-name="spandexProductName"
											:form-data="ruleForm"
											@on-select="onSelectSpandexProductChange"
										></remote-search-product-input>
									</el-form-item>
								</el-col>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="单价">
										<span class="read-only-2">{{ ruleForm.spandexPrice }}</span>
									</el-form-item>
								</el-col>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="数量" prop="spandexNumber">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.spandexNumber }}</span>
										<jk-number-input v-else v-model="ruleForm.spandexNumber" placeholder="数量" @change="calAl" />
									</el-form-item>
								</el-col>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="牵伸" prop="spandexQs">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.spandexQs }}</span>
										<jk-number-input v-else v-model="ruleForm.spandexQs" placeholder="牵伸" @change="calAl" />
									</el-form-item>
								</el-col>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="氨纶丝含量" prop="spandexContent">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.spandexContent }}</span>
										<jk-number-input v-else v-model="ruleForm.spandexContent" placeholder="氨纶丝含量" />
									</el-form-item>
								</el-col>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="金额" prop="spandexAmount">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.spandexAmount }}</span>
										<jk-number-input v-else v-model="ruleForm.spandexAmount" placeholder="金额" />
									</el-form-item>
								</el-col>
							</el-row>
						</jk-card>
						<div class="flex-between-center">
							<el-tag type="primary" effect="plain" class="margin-bottom-4">
								<span class="el-icon-soccer item-gap"></span>
								<span>粗纱</span>
							</el-tag>
						</div>
						<el-row>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="原料总成本" prop="coarseSandCost">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.coarseSandCost }}</span>
									<jk-number-input v-else v-model="ruleForm.coarseSandCost" placeholder="原料总成本" />
								</el-form-item>
							</el-col>
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="含粗" prop="coarseSandHc">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.coarseSandHc }}</span>
									<jk-number-input v-else v-model="ruleForm.coarseSandHc" placeholder="含粗" />
								</el-form-item>
							</el-col>
							<!--<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="含粗额" prop="coarseSandHce">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.coarseSandHce }}</span>
									<jk-number-input v-else v-model="ruleForm.coarseSandHce" placeholder="含粗额" />
								</el-form-item>
							</el-col>-->
							<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
								<el-form-item class="margin-bottom-10" label="金额" prop="coarseSandAmount">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.coarseSandAmount }}</span>
									<jk-number-input v-else v-model="ruleForm.coarseSandAmount" placeholder="金额" />
								</el-form-item>
							</el-col>
						</el-row>
						<coarse-sand-option-list
							:page-type="pageType"
							:layout-config="layoutConfig"
							:show-template="showTemplate"
							:option-list="ruleForm.coarseSandItemList"
							@return-data="onReturnDataOfCoarseSand"
						></coarse-sand-option-list>
						<el-tag type="primary" effect="plain" class="margin-bottom-4 margin-top-20">
							<span class="el-icon-notebook-2 item-gap"></span>
							<span>附加费用</span>
						</el-tag>
						<jk-card class="">
							<el-row>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="基本加工费" prop="processingFee">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.processingFee }}</span>
										<jk-number-input v-else v-model="ruleForm.processingFee" placeholder="基本加工费" />
									</el-form-item>
								</el-col>
								<el-col :xl="layoutConfig.xl[showTemplate]" :lg="layoutConfig.lg[showTemplate]" :md="layoutConfig.md[showTemplate]" :sm="layoutConfig.sm[showTemplate]" :xs="layoutConfig.xs[showTemplate]">
									<el-form-item class="margin-bottom-10" label="金额" prop="profit">
										<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.profit }}</span>
										<jk-number-input v-else v-model="ruleForm.surchargeAmount" placeholder="金额" />
									</el-form-item>
								</el-col>
							</el-row>
							<surcharge-option-list
								:page-type="pageType"
								:layout-config="layoutConfig"
								:show-template="showTemplate"
								:option-list="ruleForm.surchargeItem"
								@return-data="onReturnDataOfSurcharge"
							></surcharge-option-list>
						</jk-card>
					</el-form>
				</jk-card>
			</el-col>
			<!--模板-->
			<el-col v-show="showTemplate" :span="12">
				<data-template
					:form-data="cpRuleForm"
					:show-template="showTemplate"
					:layout-config="layoutConfig"
				></data-template>
			</el-col>
		</el-row>
		<!--底部合计-->
		<total-footer :form-data="ruleForm"></total-footer>
	</jk-view>
</template>

<script>
    import formMixin from './form-box-mixin';
    export default {
        mixins: [formMixin],
        data() {
            return {};
        },
        methods: {

        },
        mounted() {
        }
    };
</script>
<style scoped lang="scss">
   @import "../../option-box";
</style>
